	<!-- 互动方案 -->
	<template>
		<view class="bg pd30">
			<u-navbar :title="title" bgColor="#f9fcfe" placeholder autoBack>
				<view class="u-nav-slot" slot="right">
					<view class="closeBox dfx alc" @click="submit()">
						保存
						<image src="/static/img/openLive/save.png" style="width: 34rpx;height: 34rpx;margin-left: 3px;" mode="">
						</image>
					</view>
				</view>
			</u-navbar>

			<view class="ntitle Center pd30">
				<view class="bold">
					互动方案名称
					<view class="line"></view>
				</view>
				<view class="ipt">
					<u--input placeholder="请输入" border="none" :customStyle="customStyle" v-model="name"></u--input>
				</view>
			</view>


			<view class="con mt30">
				<view class="nav df mb0 pd30">
					<view class="df">
						<view :class="act=='key'&&'act'" @click="change('key')">
							关键词
							<view v-show="act=='key'" class="line"></view>
						</view>
						<view class="ml40" :class="act=='reply'&&'act'" @click="change('reply')">
							话 术
							<view v-show="act!='key'" class="line"></view>
						</view>
					</view>
					<view class="delete dfx alc center" @click="add"
						style="font-weight: 500;border: 1px solid #6a97eb;font-size: 28rpx;">
						{{act=='key'?'新增':'添加'}}
						<image src="/static/img/openLive/add1.png" style="width: 34rpx;height: 34rpx;" mode="">
						</image>
					</view>
				</view>

				<view class="" v-show="act=='key'">
					<scroll-view scroll-y="true" style="height: 65vh;" @scrolltolower="reachBottom">
						<view class="listBox pd30" v-if="keyList.length>0">
							<view class="item" v-for="(i,idx) in keyList">
								<view class="df alc over-hidden" style="background: #f7fafc;border-radius: 16rpx;">
									<view class="time ipt">
										<u--input placeholder="请输入关键词" border="none" :customStyle="customStyle"
											v-model="keyList[idx]"></u--input>
									</view>
									<view class="delete" @click="del(idx)">
										删除
									</view>
								</view>
							</view>
						</view>
						<!-- 内容为空 -->
						<u-empty iconColor="#fff" textColor="#fff" marginTop="60" text="暂无内容,请添加关键词" v-else mode="search"></u-empty>
					</scroll-view>
				</view>

				<view class="" v-show="act=='reply'">
					<trick :height="65" :isAddList='true' :liveList="chooseList" @getData="reachBottom" @remove="remove"></trick>
				</view>

			</view>

			<u-popup :show="showPop" closeable :round="10" mode="center" @close="showPop=false">
				<view class=" bg bdr16 pb30" style="width: 88vw;">
					<view class="bold mb10 pd30" style="padding-bottom: 0;">
						选择话术
					</view>
					<trick :height="65" :liveList="livelist" :isPop="true" @getData="reachBottom" @choose="choose"></trick>
				</view>
			</u-popup>
		</view>
	</template>

	<script>
		export default {
			data() {
				return {
					show: false,
					showPop: false,
					pageType: 'add',
					act: 'key',
					id: '',
					name: '',
					title: '新增互动方案',
					info: {},
					livelist: [],
					chooseList: [],
					keyList: [''],
					formInline: {
						page: 1,
						limit: 10,
						total: 0
					},
				};
			},
			onLoad(e) {
				if (e && e.id) {
					this.id = e.id
					this.pageType = 'edit'
					this.title = '编辑互动方案'
					this.getDetail()
				}
				this.getData()
			},
			methods: {
				getDetail() {
					let params = {
						interaction_id: this.id
					}
					this.$api.get_one(params).then(res => {
						console.log(res);
						if (res.code == 200) {
							this.info = res.data
							this.name = this.info.interaction_name
							this.keyList = this.info.keywords
							this.chooseList = this.info.videvo_data
						} else {
							this.$tools.toast(res.msg);
						}
					})
				},
				getData() {
					let params = {
						...this.formInline,
						type_s: 2,
						statusa: 3
					}
					this.$api.get_video_list(params).then(res => {
						// console.log(res);
						if (res.code == 200) {
							if (this.formInline.page == 1) {
								this.livelist = res.data.list
							} else {
								this.livelist = this.livelist.concat(res.data.list)
							}
							this.formInline.total = res.data.count
						} else {
							this.$tools.toast(res.msg);
						}
					})
				},
				change(key) {
					this.act = key
				},
				add() {
					if (this.act == 'key') {
						this.keyList.push('')
					} else {
						this.showPop = true
					}
				},
				reachBottom() {
					console.log(111);
					if (this.formInline.total > this.livelist.length) {
						this.formInline.page++
						this.getData();
					}
				},
				remove(idx) {
					console.log(idx);
					this.chooseList.splice(idx, 1)
				},
				choose(e) {
					console.log(e);
					this.chooseList.push(e)
					this.showPop = false
				},
				submit() {
					let ids = []
					this.chooseList.map(i => {
						ids.push(i.id + "")
					})
					let params = {
						interaction_name: this.name,
						keywords: this.keyList,
						videvo_ids: ids,
					}

					if (this.pageType == 'edit') {
						params.interaction_id = this.id
						this.$api.edit(params).then(res => {
							console.log(res);
							this.$tools.toast(res.msg);
							if (res.code == 200) {
								setTimeout(() => {
									uni.navigateBack()
								}, 800)
							}
						})
					} else {
						this.$api.add(params).then(res => {
							console.log(res);
							this.$tools.toast(res.msg);
							if (res.code == 200) {
								setTimeout(() => {
									uni.navigateBack()
								}, 800)
							}
						})
					}
				}
			}
		}
	</script>

	<style lang="less" scoped>
		/deep/.u-input {
			background: #f7fafc;
			height: 30px;
			margin: 0 auto;
			padding: 4px 8px !important;
		}

		.ntitle {
			background: #ffffff;
			border-radius: 16rpx;
			margin: 10rpx 0 30rpx;
			padding: 24rpx;
			box-shadow: 1px 2px 10px rgba(20, 111, 255, 0.09);

			.ipt {
				margin-top: 20rpx;

				/deep/.u-input {
					background: #f7fafc;
					height: 30px;
					width: 95%;
					margin: 0 auto;
					padding: 4px 8px !important;
				}
			}
		}

		.line {
			width: 118rpx;
			height: 10rpx;
			border-radius: 16rpx;
			transform: rotate(180deg);
			background: linear-gradient(219.46deg, rgba(0, 46, 250, 1) 0%, rgba(111, 173, 255, 0) 100%);
		}

		.con {
			background: #ffffff;
			border-radius: 16rpx;
			box-shadow: 1px 2px 10px rgba(20, 111, 255, 0.09);

			.nav {
				background: #ffffff;
				padding-bottom: 20rpx;
				justify-content: space-between;
				align-items: center;
				color: #98989a;
				border-bottom: 4rpx solid #e8f1ff;

				.line {
					width: 38px;
					height: 3px;
					background: linear-gradient(219.46deg, rgba(0, 46, 250, 1) 0%, rgba(111, 173, 255, 0) 100%);
				}

				.delete {
					width: 56px;
					height: 24px;
					color: #6a97eb;
					font-size: 26rpx;
					line-height: 48rpx;
					text-align: center;
					background: #f5f9ff;
					border-radius: 32rpx;
				}

				.act {
					font-weight: bold;
					color: #626262;
				}
			}

			.listBox {
				font-size: 15px;
				margin-top: 30rpx;
				background: #ffffff;
			}

			.item {
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				justify-content: space-between;
				align-items: center;

				/deep/.uni-input-input {
					color: #a7a8aa !important;
				}

				.time {
					color: #A6A6A6;
					background: #f7fafc;
					letter-spacing: .5px;
				}

				.delete {
					width: 56px;
					height: 24px;
					color: #6a97eb;
					font-size: 26rpx;
					line-height: 48rpx;
					text-align: center;
					background: #f5f9ff;
					border-radius: 32rpx;
				}

			}
		}
	</style>